import {createStyle} from '@/core/styleSheet';
import {Text, View, ViewStyle} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import IconFont from '../IconFont';
import Click from '../Click';

type Props = {
  style?: ViewStyle;
  hasSafeArea?: boolean;
  bgColor?: string;
  showBack?: boolean;
  titleColor?: string;
  title?: string;
  customBackFun?: () => void
};

export default (props: Props) => {
  const {
    style,
    hasSafeArea = true,
    bgColor = '#fff',
    showBack = true,
    titleColor = $.color.black,
    title = '记加班',
    customBackFun
  } = props;
  const {top} = useSafeAreaInsets();

  const onBackHandel = () => {
    if (customBackFun) {
      customBackFun();
      return;
    }
    $.router.back();
  }

  return (
    <View style={style}>
      {hasSafeArea && <View style={{height: top, backgroundColor: bgColor}} />}
      {/* header */}
      <View style={[styles.headerContainer, {backgroundColor: bgColor}]}>
        {showBack && (
          <Click style={styles.iconBtn} onPress={onBackHandel}>
            <IconFont name="icon-a-iconfanhui" size={24} />
          </Click>
        )}
        <Text
          style={[styles.title, {color: titleColor}]}
          numberOfLines={1}
          ellipsizeMode="tail">
          {title}
        </Text>
      </View>
    </View>
  );
};

const styles = createStyle({
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: 96,
    position: 'relative',
  },
  title: {
    marginHorizontal: 50,
    fontSize: 40
  },
  iconBtn: {
    width: 96,
    height: 96,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    left: 0,
    top: 0,
  }
});
